<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<!--<link href="public/admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">-->
	    <!-- Loading Flat UI -->
	<link href="public/admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
	<!--<link href="public/admin/Flat/docs/assets/css/demo.css" rel="stylesheet">-->
	<link rel="shortcut icon" href="public/admin/Flat/img/favicon.ico">
	
	<!--<link rel="stylesheet" href="resource/hdjs/css/bootstrap.min.css">-->
	<script src="resource/hdjs/js/angular.min.js"></script>

	<link href="resource/hdjs/css/bootstrap.min.css" rel="stylesheet">
	<link href="resource/hdjs/css/font-awesome.min.css" rel="stylesheet">
	<script src="resource/hdjs/js/jquery.min.js"></script>
	<script src="resource/hdjs/app/util.js"></script>
	<script src="resource/hdjs/require.js"></script>
	<script src="resource/hdjs/app/config.js"></script>
	
	
</head>
<body>
	<div class="container-fluid">
	<div class="row-fluid">
	<div class="span12">

	<form action="" method='post'>
		<fieldset>
			<legend>添加商品</legend>
			<table class='table table-bordered table-hover'>
				<thead>
					<tr>
						<th colspan="2" class="btn btn-primary">基本信息</th>
					</tr>
				</thead>
				<tbody>
					<tr class="info">
						<td>所属分类</td>
						<td>
						
							<select name="cid">
								<option value="0">-请选择-</option>
								<foreach from='$cateData' key='$k' value='$v'>
									<if value="$v['pid']==0">
										<optgroup label="{{$v['_cname']}}"> </optgroup>
									<else>
										<option value="{{$v['cid']}}" tid="{{$v['tid']}}">{{$v['_cname']}}</option>
									</if>
								
								</foreach>
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>所属品牌</td>
						<td>
							<select name="bid">
								<option value="0">-请选择-</option>
									<foreach from='$brandData' key='$k' value='$v'>
									<option value="{{$v['bid']}}">{{$v['bname']}}</option>
									</foreach>
								
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>商品名称</td>
						<td>
							<input type="text" name='gname'/>
						</td>
					</tr>
					<tr class="info">
						<td>单位</td>
						<td>
							<input type="text" name='unit' value='件'/>
						</td>
					</tr>
					<tr class="info">
						<td>市价场</td>
						<td>
							<input type="text" name='marketprice'/>
						</td>
					</tr>
					<tr class="info">
						<td>商城价</td>
						<td>
							<input type="text" name='shopprice'/>
						</td>
					</tr>
					<tr class="info">
						<td>点击次数</td>
						<td>
							<input type="text" name='click'/>
						</td>
					</tr>
				</tbody>
			</table>
<script type="text/javascript">
	$(function(){
		$('select[name=cid]').change(function(){
			var tid=$('option:selected').attr('tid');
			$('input[name=tid]').val(tid);
//			alert(tid);
			$.ajax({
				type:"post",
				url:"{{U('goods/typeData')}}",
				data:{tid:tid},
				dataType:'json',
				success:function(phpData){
//					如果假就不在往下走
					if(!phpData.valid){
						return false;
					}
					
//					定义两个变量接收数据
					var attr='';
					var spec='';
//					遍历数据
					$.each(phpData.message, function(k,v) {
						if(v.class==0){
							attr+="<tbody><tr class='info'><td>"+v.taname+"</td><td>";
							attr+="<select name='attr["+v.taid+"]' id=''>";	
							attr+="<option value=''>请选择</option>";
							$.each(v.tavalue, function(kk,vv) {
								attr+="<option value='"+vv+"'>"+vv+"</option>";
							});
							attr+="</select></td></tr></tbody>";
						}else{
							spec+="<tbody><tr class='info'><td>"+v.taname+"</td><td>";
							spec+="<select name='spec["+v.taid+"][gtvalue][]' id=''>";
							$.each(v.tavalue, function(kk,vv) {
								spec+="<option value='"+vv+"'>"+vv+"</option>";
							});
							spec+="</select></td><td>附加价格：";
							spec+="<input type='text' name='spec["+v.taid+"][added][]' id='' /></td><td>";
							spec+="<span class='btn btn-success add-spec'>增加规格</span></td></tr></tbody>";
						}
					});
					
//					插入到页面中对应的位置
					$('#attr').html(attr);
					$('#spec').html(spec);					
					
					
				}
			});
		})
	})
</script>
<script type="text/javascript">
	$(function(){
		$(document).on('click','.add-spec',function(){
//			获取父级元素
			var parentTr=$(this).parents('tr');
//			克隆
			var cloneTr=parentTr.clone();
//			修改克隆数据
			cloneTr.find('.add-spec').removeClass('add-spec btn-success').addClass('remove-spec btn-danger').html('删除规格');
//			插入当前的tr后面
			parentTr.after(cloneTr);
			
		});
//		删除规格
		$(document).on('click','.remove-spec',function(){
			$(this).parents('tr').remove();
		});
	})
</script>

			<p class="btn btn-primary">商品属性</p>
			<table class="table table-bordered table-hover" id='attr' class="info">
				
			</table>
			<p class="btn btn-primary">商品规格</p>
			<table class="table table-bordered table-hover" id='spec'>
				
				
			</table>
			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">列表图</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
						<div class="input-group">
					        <input type="text" class="form-control" name="pic" readonly="" value="">
					        <div class="input-group-btn">
					            <button onclick="upImagepic(this)" class="btn btn-default" type="button">选择图片</button>
					        </div>
					    </div>
					    <div class="input-group" style="margin-top:5px;">
					         <img src="resource/images/nopic.jpg" class="img-responsive img-thumbnail" width="150">
					        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
					    </div>
					</td>
					<td id='pic-list'></td>
				</tr>
			</table>

			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">商品图册</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
				<button onclick="upImagephoto(this)" class="btn btn-default" type="button">选择图片</button>
						<div id="box"></div>		
					</td>
					<td id='photo-list'></td>
				</tr>
			</table>

			<table class='table'>
				<tr class="next_show">
					<th class="btn btn-primary">商品详细</th>
				</tr>
				<tr class=" info">
					<td>
						<textarea name="intro" id="containerintro" style="height:300px;width:100%;"></textarea>
					</td>
				</tr>
			</table>

			<table class='table'>
				<tr class="next_show">
					<th class="btn btn-primary">售后服务</th>
				</tr>
				<tr class=" info">
					<td>
						<textarea name="service" id="containerservice" style="height:300px;width:100%;"></textarea>
					</td>
				</tr>
			</table>
			<input type="hidden" name='tid' value='0'/>
			<input type="submit" value="确认添加" class="btn btn-primary btn-block btn-large" />
		</fieldset>
	</form>

	</div>
	</div>
	</div>
	
	<!--单图上传-->
	<script>
//上传图片
function upImagepic(obj) {
    require(['util'], function (util) {
      options = {
          multiple: false,//是否允许多图上传
          data:'',
          hash:1
          //hash为确定上传文件标识（可以以用户编号，标识为此用户上传的文件，系统使用这个字段值来显示文件列表），data为数据表中的data字段值，开发者根据业务需要自行添加
      };
      util.image(function (images) {             //上传成功的图片，数组类型 
          $("[name='pic']").val(images[0]);
          $(".img-thumbnail").attr('src', images[0]);
      }, options)
    });
}

//移除图片 
function removeImg(obj) {
	var imgurl=$('input[name=thumb]').val();
	    $.post("{{U('rmfile')}}",{imgurl:imgurl},function(phpData){
    	
    },'json');
    $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
    $(obj).parent().prev().find('input').val('');
}
</script>
<!--多图上传-->	
<script>
    //上传图片
    function upImagephoto(obj) {
        require(['util'], function (util) {
            options = {
                //上传多图
                multiple: true, 
            };
            util.image(function (images) { 
                $(images).each(function(k,v){
                    $("<img src='"+v+"' width='150' height='90'/>").appendTo('#box');
                    $("<input type='hidden' name='photo[]' value='"+v+"'>").appendTo('#box');
                })
            }, options)
        });
    }
</script>
	
<script>
    util.ueditor('containerintro', {hash:2,data:'hd'}, function (editor) {
        //这是回调函数 editor是百度编辑器实例
    });
</script>
<script>
    util.ueditor('containerservice', {hash:2,data:'hd'}, function (editor) {
        //这是回调函数 editor是百度编辑器实例
    });
</script>	
	
</body>
</html>